import React, { useState } from 'react';
import { Upload, Button, message, Card, Typography, Row, Col, Space } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';

const { Dragger } = Upload;
const { Title, Paragraph, Text } = Typography;

const Compose = () => {
  const [uploading, setUploading] = useState(false);

  const uploadProps = {
    name: 'composeFile',
    accept: '.yml,.yaml',
    customRequest: async ({ file, onSuccess, onError }) => {
      const formData = new FormData();
      formData.append('composeFile', file);
      
      try {
        setUploading(true);
        const response = await axios.post('/api/compose/deploy', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        message.success(response.data.message);
        onSuccess();
      } catch (error) {
        message.error(error.response?.data?.error || '部署失败');
        onError();
      } finally {
        setUploading(false);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  return (
    <div>
      <h1>Compose 部署</h1>
      
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="上传 Compose 文件">
            <Dragger {...uploadProps} disabled={uploading}>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">点击或拖拽上传 docker-compose.yml 文件</p>
              <p className="ant-upload-hint">
                支持 .yml 和 .yaml 格式文件
              </p>
            </Dragger>
          </Card>
        </Col>
        
        <Col xs={24} lg={12}>
          <Card title="使用说明">
            <Typography>
              <Title level={4}>如何创建 Compose 文件</Title>
              <Paragraph>
                1. 创建一个名为 <Text code>docker-compose.yml</Text> 的文件
              </Paragraph>
              <Paragraph>
                2. 定义您的服务、网络和卷配置
              </Paragraph>
              <Paragraph>
                3. 上传文件后，系统将自动执行 <Text code>docker-compose up -d</Text>
              </Paragraph>
              
              <Title level={4}>示例配置</Title>
              <pre style={{ 
                background: '#f5f5f5', 
                padding: 16, 
                borderRadius: 4,
                fontSize: 12,
                overflow: 'auto'
              }}>
{`version: '3.8'
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./html:/usr/share/nginx/html
  
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:`}
              </pre>
            </Typography>
          </Card>
        </Col>
      </Row>

      <Card title="部署状态" style={{ marginTop: 16 }}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Paragraph>
            上传文件后，您可以在容器管理页面查看部署状态
          </Paragraph>
          <Paragraph>
            部署过程可能需要一些时间，请耐心等待
          </Paragraph>
        </Space>
      </Card>
    </div>
  );
};

export default Compose;
